<template>
  <uieditor-div>
    <Row :gutter="16">
      <Col class="mt-sm" span="24">
        <Select class="ml-md inline" style="width: 320px" v-model="curTmpl" @on-change="onChange">
          <Option
            v-for="item in templates"
            :value="item.id"
            :label="item.name"
            :key="item.id"
          ></Option>
        </Select>
        <RadioGroup v-model="type" class="ml-sm" type="button">
          <Radio label="code" editor-attrs='{"text":"代码"}'>
            <span ivued-use-attr> 代码 </span>
          </Radio>
          <Radio label="view" editor-attrs='{"text":"效果"}'>
            <span ivued-use-attr> 效果 </span>
          </Radio>
        </RadioGroup>
      </Col>
      <Col class="mt-sm" span="24">
        <div
          style="
            position: fixed;
            top: 55px;
            bottom: 0;
            left: 0;
            right: 0px;
            overflow: hidden;
          "
        >
          <!-- <router-view>
			</router-view> -->
          <iview-uieditor-render
            v-if="type == 'view'"
            :options="options"
            :tmpl="tmpl"
          />
          <uieditor-monaco-editor
            v-else
            v-model="tmpl"
            :format-auto="true"
            language="html"
          />
        </div>
      </Col>
    </Row>
  </uieditor-div>
</template>
<script>
import { DeomTemplates } from "./templates";

export default {
  data() {
    return {
      type: "code",
      options: {},
      templates: _.cloneDeep(DeomTemplates),
      tmpl: DeomTemplates[0].template,
      curTmpl: DeomTemplates[0].id,
    };
  },
  computed: {},
  watch: {},
  methods: {
    onChange(e) {
      const tmpl = _.find(this.templates, { id: e });
      if (!tmpl) return;
      // this.type = "code";
      this.tmpl = tmpl.template;
    },
  },
  created() {
    console.warn("this", this);
  },
};
</script>
<style lang="less">
body {
  overflow: hidden;
}
</style>
